<script setup lang="ts">
import { computed } from 'vue'
import type { WindowMergeArea } from './class/windowmergearea'

const props = defineProps<{
  visible: boolean
  data: WindowMergeArea
}>()

const style = computed(() => {
  return {
    top: props.data.top + 'px',
    bottom: props.data.bottom + 'px',
    left: props.data.left + 'px',
    right: props.data.right + 'px',
  }
})
</script>

<template>
  <div v-show="visible" class="merge-window" :style="style"></div>
</template>

<style scoped lang="less">
.merge-window {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: var(--window-border-radius);
}
</style>
